import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
import 'package:syncfusion_flutter_charts/sparkcharts.dart';
import 'package:intl/intl.dart';

void main() {
  runApp(ChartApp());
}

class ChartApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Syncfusion Flutter Charts Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 数据模型
  List<SalesData> salesData = [
    SalesData('Jan', 35),
    SalesData('Feb', 28),
    SalesData('Mar', 34),
    SalesData('Apr', 32),
    SalesData('May', 40)
  ];
  
  List<NumericData> numericData = [
    NumericData(1, 35),
    NumericData(2, 28),
    NumericData(3, 34),
    NumericData(4, 32),
    NumericData(5, 40)
  ];
  
  List<DateTimeData> dateTimeData = [
    DateTimeData(DateTime(2023, 1), 35),
    DateTimeData(DateTime(2023, 2), 28),
    DateTimeData(DateTime(2023, 3), 34),
    DateTimeData(DateTime(2023, 4), 32),
    DateTimeData(DateTime(2023, 5), 40)
  ];
  
  List<LogData> logData = [
    LogData(1, 10),
    LogData(2, 100),
    LogData(3, 1000),
    LogData(4, 10000),
    LogData(5, 100000)
  ];
  
  List<ColumnData> columnData = [
    ColumnData('Jan', 35, Colors.blue),
    ColumnData('Feb', 28, Colors.green),
    ColumnData('Mar', 34, Colors.orange),
    ColumnData('Apr', 32, Colors.red),
    ColumnData('May', 40, Colors.purple)
  ];

  // 行为组件
  late TrackballBehavior _trackballBehavior;
  late CrosshairBehavior _crosshairBehavior;
  late TooltipBehavior _tooltipBehavior;
  late ZoomPanBehavior _zoomPanBehavior;

  @override
  void initState() {
    super.initState();
    
    // 初始化轨迹球行为
    _trackballBehavior = TrackballBehavior(
      enable: true,
      activationMode: ActivationMode.singleTap,
      tooltipDisplayMode: TrackballDisplayMode.floatAllPoints,
      lineType: TrackballLineType.vertical,
      tooltipSettings: InteractiveTooltip(
        enable: true,
        color: Colors.blue[100],
        borderColor: Colors.blue,
        borderWidth: 2,
        borderRadius: 8,
        arrowLength: 10,
        arrowWidth: 6,
        format: 'point.x : point.y',
        connectorLineColor: Colors.blue,
        connectorLineWidth: 2,
        connectorLineDashArray: <double>[5, 5],
        decimalPlaces: 2,
        canShowMarker: true,
        textStyle: TextStyle(
          color: Colors.blue,
          fontSize: 14,
          fontWeight: FontWeight.bold,
        ),
      ),
      markerSettings: TrackballMarkerSettings(
        markerVisibility: TrackballVisibilityMode.visible,
        shape: DataMarkerType.circle,
        color: Colors.blue,
        borderColor: Colors.white,
        borderWidth: 2,
        width: 10,
        height: 10,
      ),
    );
    
    // 初始化十字线行为
    _crosshairBehavior = CrosshairBehavior(
      enable: true,
      activationMode: ActivationMode.singleTap,
      lineType: CrosshairLineType.both,
      lineColor: Colors.red,
      lineWidth: 2,
      lineDashArray: [5, 5],
    );
    
    // 初始化工具提示行为
    _tooltipBehavior = TooltipBehavior(
      enable: true,
      color: Colors.grey[100],
      borderColor: Colors.grey,
      borderWidth: 2,
      format: '{series.name} : {point.y}',
      decimalPlaces: 2,
      textStyle: TextStyle(
        color: Colors.black,
        fontSize: 12,
        fontWeight: FontWeight.bold,
      ),
      opacity: 0.9,
      duration: 2000,
      animationDuration: 500,
    );
    
    // 初始化缩放平移行为
    _zoomPanBehavior = ZoomPanBehavior(
      enablePinching: true,
      enableDoubleTapZooming: true,
      enablePanning: true,
      enableSelectionZooming: true,
      selectionRectColor: Colors.blue.withOpacity(0.3),
      selectionRectBorderColor: Colors.blue,
      selectionRectBorderWidth: 1,
      zoomMode: ZoomMode.x,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Syncfusion Flutter Charts Demo'),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            // 1. SfCartesianChart with LineSeries
            _buildChartSection(
              'SfCartesianChart with LineSeries',
              SfCartesianChart(
                title: ChartTitle(text: '年度销售数据'),
                legend: Legend(isVisible: true, position: LegendPosition.top),
                primaryXAxis: CategoryAxis(),
                primaryYAxis: NumericAxis(),
                tooltipBehavior: _tooltipBehavior,
                trackballBehavior: _trackballBehavior,
                series: <CartesianSeries<SalesData, String>>[
                  LineSeries<SalesData, String>(
                    dataSource: salesData,
                    xValueMapper: (SalesData sales, _) => sales.year,
                    yValueMapper: (SalesData sales, _) => sales.sales,
                    name: '销售数据',
                    color: Colors.blue,
                    width: 2,
                    markerSettings: MarkerSettings(isVisible: true),
                    dataLabelSettings: DataLabelSettings(isVisible: true),
                  )
                ],
              ),
            ),
            
            // 2. SfCartesianChart with AreaSeries
            _buildChartSection(
              'SfCartesianChart with AreaSeries',
              SfCartesianChart(
                title: ChartTitle(text: '区域销售数据'),
                legend: Legend(isVisible: true, position: LegendPosition.top),
                primaryXAxis: CategoryAxis(),
                primaryYAxis: NumericAxis(),
                tooltipBehavior: _tooltipBehavior,
                series: <CartesianSeries<SalesData, String>>[
                  AreaSeries<SalesData, String>(
                    dataSource: salesData,
                    xValueMapper: (SalesData sales, _) => sales.year,
                    yValueMapper: (SalesData sales, _) => sales.sales,
                    name: '销售数据',
                    color: Colors.green.withOpacity(0.5),
                    borderColor: Colors.green,
                    borderWidth: 2,
                    markerSettings: MarkerSettings(isVisible: true),
                  )
                ],
              ),
            ),
            
            // 3. SfCartesianChart with ColumnSeries
            _buildChartSection(
              'SfCartesianChart with ColumnSeries',
              SfCartesianChart(
                title: ChartTitle(text: '柱状销售数据'),
                legend: Legend(isVisible: true, position: LegendPosition.top),
                primaryXAxis: CategoryAxis(),
                primaryYAxis: NumericAxis(),
                tooltipBehavior: _tooltipBehavior,
                series: <CartesianSeries<ColumnData, String>>[
                  ColumnSeries<ColumnData, String>(
                    dataSource: columnData,
                    xValueMapper: (ColumnData data, _) => data.category,
                    yValueMapper: (ColumnData data, _) => data.value,
                    pointColorMapper: (ColumnData data, _) => data.color,
                    name: '销售数据',
                    width: 0.8,
                  )
                ],
              ),
            ),
            
            // 4. SfCircularChart with PieSeries
            _buildChartSection(
              'SfCircularChart with PieSeries',
              SfCircularChart(
                title: ChartTitle(text: '饼图销售数据'),
                legend: Legend(isVisible: true, position: LegendPosition.bottom),
                tooltipBehavior: _tooltipBehavior,
                series: <CircularSeries<SalesData, String>>[
                  PieSeries<SalesData, String>(
                    dataSource: salesData,
                    xValueMapper: (SalesData data, _) => data.year,
                    yValueMapper: (SalesData data, _) => data.sales,
                    name: '销售数据',
                    dataLabelSettings: DataLabelSettings(isVisible: true),
                    explode: true,
                    explodeAll: false,
                    explodeIndex: 2,
                  )
                ],
              ),
            ),
            
            // 5. NumericAxis Example
            _buildChartSection(
              'NumericAxis Example',
              SfCartesianChart(
                title: ChartTitle(text: '数值轴示例'),
                legend: Legend(isVisible: true, position: LegendPosition.top),
                primaryXAxis: NumericAxis(
                  minimum: 0,
                  maximum: 6,
                  interval: 1,
                ),
                primaryYAxis: NumericAxis(),
                tooltipBehavior: _tooltipBehavior,
                series: <CartesianSeries<NumericData, double>>[
                  LineSeries<NumericData, double>(
                    dataSource: numericData,
                    xValueMapper: (NumericData data, _) => data.month,
                    yValueMapper: (NumericData data, _) => data.sales,
                    name: '销售数据',
                  )
                ],
              ),
            ),
            
            // 6. CategoryAxis Example
            _buildChartSection(
              'CategoryAxis Example',
              SfCartesianChart(
                title: ChartTitle(text: '分类轴示例'),
                legend: Legend(isVisible: true, position: LegendPosition.top),
                primaryXAxis: CategoryAxis(
                  labelRotation: 45,
                  labelIntersectAction: AxisLabelIntersectAction.rotate45,
                ),
                primaryYAxis: NumericAxis(),
                tooltipBehavior: _tooltipBehavior,
                series: <CartesianSeries<SalesData, String>>[
                  LineSeries<SalesData, String>(
                    dataSource: salesData,
                    xValueMapper: (SalesData sales, _) => sales.year,
                    yValueMapper: (SalesData sales, _) => sales.sales,
                    name: '销售数据',
                  )
                ],
              ),
            ),
            
            // 7. DateTimeAxis Example
            _buildChartSection(
              'DateTimeAxis Example',
              SfCartesianChart(
                title: ChartTitle(text: '日期时间轴示例'),
                legend: Legend(isVisible: true, position: LegendPosition.top),
                primaryXAxis: DateTimeAxis(
                  dateFormat: DateFormat('MMM yyyy'),
                  intervalType: DateTimeIntervalType.months,
                ),
                primaryYAxis: NumericAxis(),
                tooltipBehavior: _tooltipBehavior,
                series: <CartesianSeries<DateTimeData, DateTime>>[
                  LineSeries<DateTimeData, DateTime>(
                    dataSource: dateTimeData,
                    xValueMapper: (DateTimeData data, _) => data.month,
                    yValueMapper: (DateTimeData data, _) => data.sales,
                    name: '销售数据',
                  )
                ],
              ),
            ),
            
            // 8. LogarithmicAxis Example
            _buildChartSection(
              'LogarithmicAxis Example',
              SfCartesianChart(
                title: ChartTitle(text: '对数轴示例'),
                legend: Legend(isVisible: true, position: LegendPosition.top),
                primaryXAxis: NumericAxis(),
                primaryYAxis: LogarithmicAxis(
                  logBase: 10,
                ),
                tooltipBehavior: _tooltipBehavior,
                series: <CartesianSeries<LogData, double>>[
                  LineSeries<LogData, double>(
                    dataSource: logData,
                    xValueMapper: (LogData data, _) => data.month,
                    yValueMapper: (LogData data, _) => data.sales,
                    name: '增长数据',
                  )
                ],
              ),
            ),
            
            // 9. Spark Line Chart
            _buildChartSection(
              'Spark Line Chart',
              Container(
                height: 100,
                child: SfSparkLineChart.custom(
                  trackball: SparkChartTrackball(
                    activationMode: SparkChartActivationMode.tap,
                  ),
                  xValueMapper: (int index) => salesData[index].year,
                  yValueMapper: (int index) => salesData[index].sales,
                  dataCount: salesData.length,
                ),
              ),
            ),
            
            // 10. Spark Area Chart
            _buildChartSection(
              'Spark Area Chart',
              Container(
                height: 100,
                child: SfSparkAreaChart.custom(
                  trackball: SparkChartTrackball(
                    activationMode: SparkChartActivationMode.tap,
                  ),
                  xValueMapper: (int index) => salesData[index].year,
                  yValueMapper: (int index) => salesData[index].sales,
                  dataCount: salesData.length,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
  
  Widget _buildChartSection(String title, Widget chart) {
    return Container(
      padding: EdgeInsets.all(10),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            title,
            style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
          ),
          SizedBox(height: 10),
          Container(
            height: 300,
            child: chart,
          ),
          Divider(),
        ],
      ),
    );
  }
}

// 数据模型类
class SalesData {
  SalesData(this.year, this.sales);
  
  final String year;
  final double sales;
}

class NumericData {
  NumericData(this.month, this.sales);
  
  final double month;
  final double sales;
}

class DateTimeData {
  DateTimeData(this.month, this.sales);
  
  final DateTime month;
  final double sales;
}

class LogData {
  LogData(this.month, this.sales);
  
  final double month;
  final double sales;
}

class ColumnData {
  ColumnData(this.category, this.value, this.color);
  
  final String category;
  final double value;
  final Color color;
}